<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/7/29
  Time: 11:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css">

    <style>
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-container-fluid">
    <div class="layui-row">
        <div class="layui-col-xs2">
            <div id="companyTree"></div>
        </div>
        <div class="layui-col-xs10">
            <shiro:hasPermission name="ems:delete">
                <button type="button" class="layui-btn" id="addBtn">
                    <i class="layui-icon">&#xe608;</i> 添加
                </button>
            </shiro:hasPermission>
            <table id="emsTable" lay-filter="emsTable"></table>
        </div>
    </div>
</div>
<form id="addForm" class="layui-form" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="emsName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门</label>
        <div class="layui-input-block">
            <select id="dept" name="deptId" lay-filter="dept">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">薪资</label>
        <div class="layui-input-block">
            <input type="text" name="salary" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadFile">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <input type="hidden" name="picPath" id="picPath" value=""/>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addEms">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    layui.use(["table","form","upload","layer","tree"],function(){
        var table=layui.table;
        var form=layui.form;
        var upload=layui.upload;
        var layer=layui.layer;
        var tree=layui.tree;
        table.render({
            elem: '#emsTable'
            ,url: '${pageContext.request.contextPath}/layui-ems/selectAll' //数据接口
            ,cols: [[ //表头
                {field: 'emsId', title: 'ID',}
                ,{field: 'emsName', title: '姓名'}
                ,{field: 'salary', title: '薪资'}
                ,{field: 'sd', title: '头像',templet:function(d){
                    return "<img src='"+d.picPath+"' height='50'/>";
                    }}
                ,{field: 'dept', title: '部门',templet:function(d){
                    return d.dept.deptName;
                }}
            ]]
        });
        //发出ajax请求获取到部门所有信息，展示到select标签里面
        $.ajax({
            url:"${pageContext.request.contextPath}/layui-dept/selectAll",
            dataType:"json",
            success:function(data){
                var optionStr="";
                for(var i=0;i<data.length;i++){
                    var id=data[i].deptId;
                    var name=data[i].deptName;
                    optionStr+="<option value='"+id+"'>"+name+"</option>";
                }
                $("#dept").html(optionStr);
                form.render('select');//更新下拉列表框
            }
        });
        //文件上传的渲染===开始
        //执行实例
        upload.render({
            elem: '#uploadFile' //绑定元素
            ,url: '${pageContext.request.contextPath}/layui-ems/uploadHeadImg' //上传接口
            ,done: function(res){
                alert(res);
                console.log(res)
                //上传完毕回调,需要把上传到服务器的文件名放到form表单里面。
                $("#picPath").val(res.msg);
            }
        });
        //文件上传的渲染===结束

        //给添加按钮增加弹出层---开始
        $("#addBtn").click(function(){
            layer.open({
                type:1,
                title:"添加员工",
                content:$("#addForm")
            });
        });
        //给添加按钮增加弹出层---结束
        //给添加员工表单增加监听事件---开始
        form.on("submit(addEms)", function(data){
            //发出ajax请求，往数据库里面存储数据---开始
            $.ajax({
                url:"${pageContext.request.contextPath}/layui-ems/add",
                data:data.field,
                dataType:"json",
                type:"post",
                success:function(res){
                    if(res.code==0){
                        //关闭弹出层
                        layer.closeAll();
                        layer.msg("添加成功！");
                        //刷新table表格
                        table.reload("emsTable");
                    }
                }
            });
            //发出ajax请求，往数据库里面存储数据---结束
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //给添加员工表单增加监听事件---结束

        //生成公司树---开始
        $.ajax({
            url:"${pageContext.request.contextPath}/layui-company/selectAllCompanyAndDept",
            dataType:"json",
            success:function(data){
                //渲染
                tree.render({
                    elem: '#companyTree'  //绑定元素
                    ,click: function(obj){
                        if(!obj.data.children){
                            table.reload("emsTable",{
                                where:{deptid:obj.data.id}
                            });
                        }
                    }
                    ,data:data
                });
            }
        });
        //生成公司树---结束
    })
</script>
</body>
</html>
